<template>
	<div class="details-page">
		<headerTop></headerTop>
		<div class="banner">
			<img src="../../assets/img/detailBg.jpg" >
		</div>
		<h2 class="title"><span>[ </span>车型概览<span> ]</span></h2>
		<div class="container">
			<div class="motor-img">
				<img :src="motorData.imgSrc" >
			</div>
			<div class="motor-introduce">
				<h1>{{ motorData.title }}</h1>
				<h4>
					<span>售价:</span>
					<span>RMB</span>
					<span class="price">{{ motorData.price }}</span>
					<span>元</span>
				</h4>
				<h3>{{ motorData.exp }}</h3>
				<p>
					起身-收油-刹车-降档-开腿-侧挂-入弯
					<br>
					在跨上CFMOTO 250SR之前
					<br>
					一系列动作已如游戏操作般在脑海里排练过无数遍
					<br>
					跨上车之后
					<br>
					速度的力量
					<br>
					喷涌的激情
					<br>
					穿过发动机和车架
					<br>
					在赛道沥青和血液心脏之间来回传递
					<br>
					你以为这是场比赛
					<br>
					而我只当这是游戏而已
				</p>
				<div class="buy">
					<span>商城购买:</span>
					<br><br>
					<div>
						<span class="tm"></span>
						<span class="jd"></span>
					</div>
				</div>
			</div>
		</div>
		<h2 class="title"><span>[ </span>技术参数<span> ]</span></h2>
		<div class="parameter">
			<div class="left">
				<div>
					<h6>长X宽X高</h6>
					<span>{{ motorData.params.length }}X{{ motorData.params.w }}X{{ motorData.params.h }}mm</span>
				</div>
				<div>
					<h6>发动机类型</h6>
					<span>{{ motorData.params.engine }}</span>
				</div>
				<div>
					<h6>油箱容量</h6>
					<span>{{ motorData.params.fuelTank }}L</span>
				</div>
				<div>
					<h6>制动方式</h6>
					<span>{{ motorData.params.brake }}</span>
				</div>
				<div>
					<h6>ABS制动</h6>
					<span>{{ motorData.params.ABS }}</span>
				</div>
				<div>
					<h6>发动机冷却</h6>
					<span>{{ motorData.params.cooling }}</span>
				</div>
				<div>
					<h6>最大功率</h6>
					<span>{{ motorData.params.mostPowerful }}</span>
				</div>
				<div>
					<h6>最大扭矩</h6>
					<span>{{ motorData.params.maximumTorque }}</span>
				</div>
			</div>
			<div class="right">
				<span class="car-h">车高{{ motorData.params.h }}mm</span>
				<span class="car-w">车长{{ motorData.params.length }}mm</span>
				<img :src="motorData.imgSrc" >
			</div>
		</div>
		<foot></foot>
	</div>
</template>

<script>
	import headerTop from '../headNav/index.vue'
	import foot from '../footer/foot.vue'
	
	export default {
		components: {
			headerTop,
			foot
		},
		data() {
			return {
				motorData: {}
			}
		},
		created() {
			this.getData()
		},
		methods: {
			getData(){
				this.motorData = this.$route.params
			}
		},
	}
</script>

<style lang="scss" scoped>
	.details-page {
		.banner {
			width: 100%;
			img {
				width: 100%;
			}
		}
		.title {
			padding: 30px 0 60px;
			text-align: center;
			span {
				font-weight: normal;
				color: cadetblue;
			}
		}
		.container {
			width: 84%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			.motor-img {
				width: 46%;
				img {
					width: 100%;
				}
			}
			.motor-introduce {
				width: 48%;
				h4 {
					margin-top: 16px;
					span {
						display: inline-block;
						margin-right: 6px;
					}
					.price {
						font-size: 20px;
						color: #CD2837;
					}
				}
				h3 {
					margin-top: 16px;
				}
				p {
					margin-top: 16px;
					font-size: 14px;
					color: gray;
				}
				.buy {
					margin-top: 22px;
					div {
						display: flex;
						column-gap: 20px;
						.tm {
							display: inline-block;
							width: 34px;
							height: 34px;
							background: url(../../assets/img/man_an2.png);
							background-size: 100% 100%;
						}
						.jd {
							display: inline-block;
							width: 34px;
							height: 34px;
							background: url(../../assets/img/man_an3.png);
							background-size: 100% 100%;
						}
					}
				}
			}
		}
		.parameter {
			width: 84%;
			margin: 0 auto 50px;
			display: flex;
			justify-content: space-between;
			.left {
				width: 48%;
				div {
					display: flex;
					justify-content: space-between;
					padding: 10px 0;
					border-bottom: 1px solid #ddd;
					h6 {
						color: #777;
					}
					span {
						font-size: 12px;
					}
				}
			}
			.right {
				width: 46%;
				position: relative;
				img {
					width: 100%;
				}
				.car-h {
					font-weight: bold;
					font-size: 20px;
					color: #666;
					position: absolute;
					top: 0;
				}
				.car-w {
					font-weight: bold;
					font-size: 20px;
					color: #666;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
</style>
